<template>
  <div class="feedbackList">
    <div class="title">反馈列表</div>
    <div class="list">
      <table cellspacing="0">
        <thead>
          <th>序号</th>
          <th>意见类型</th>
          <th>意见内容</th>
          <th>用户名</th>
          <th>手机号</th>
          <th>上传时间</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(item, indexNumber) in feedbackList" :key="item.commentId">
            <td>{{ ($store.state.feedback.commentDTO.index - 1) * $store.state.feedback.commentDTO.pageSize + indexNumber + 1 }}</td>
            <td>{{ item.commentType }}</td>
            <td class="comment">{{ item.commentContent }}</td>
            <td>{{ item.customerName }}</td>
            <td>{{ item.customerPhone }}</td>
            <td>{{ item.createTime }}</td>
            <td>
              <span class="showDetail" @click="showDetail(item.commentId)">查看详情</span>
              <span class="delete" @click="deleteFeedback(item)">删除</span>
            </td>
          </tr>
        </tbody>
      </table>
      <empty v-show="feedbackList.length === 0"></empty>
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="$store.state.feedback.commentDTO.pageSize"
        layout="prev, pager, next, jumper"
        :total="$store.state.feedback.total"
        v-show="feedbackList.length !== 0"
      ></el-pagination>
    </div>
    <delete-alert-box
    v-if="isDelete"
    :isDelete=isDelete
    :descTips=descTips
    @Confirm=Confirm
    @Cancel=Cancel
    ></delete-alert-box>
  </div>
</template>

<script>
import { info, deleteFeedback } from '../../../api/feedback'
import moment from 'moment'
import empty from '../../../components/empty'
export default {
  data () {
    return {
      isDelete: false,
      descTips: [],
      id: ''
    }
  },
  computed: {
    feedbackList () {
      const list = this.$store.state.feedback.feedbackList
      list.length && list.forEach(item => {
        item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm')
      })
      return list
    }
  },
  components: {
    empty
  },
  methods: {
    Confirm () {
      const id = this.id
      deleteFeedback(id).then(async res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.isDelete = false
          await this.$store.dispatch('feedback/getTypeList')
          await this.$store.dispatch('feedback/getList')
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
        this.close()
      })
    },
    Cancel () {
      this.isDelete = false
    },
    handleCurrentChange (val) {
      this.$store.commit('feedback/set_commentDTO_index', val)
      this.$store.dispatch('feedback/getList')
    },
    // 查看详情的抽屉
    showDetail (id) {
      this.$store.commit('feedback/set_showDrawer', true)
      info(id).then(async res => {
        // res.data.data.commentImg = res.data.data.commentImg.substr(1)
        // res.data.data.commentImg = res.data.data.commentImg.substr(0, res.data.data.commentImg.length - 1)
        // res.data.data.commentImg = res.data.data.commentImg.replace(/\u0022/g, '')
        const commentImgList = res.data.data.commentImg.split(',')
        const commentImg = []
        if (commentImgList.length) {
          for (let i = 0; i < commentImgList.length; i++) {
            commentImg.push(await this.$_makeMediaSrc(Number(commentImgList[i])))
          }
        }
        res.data.data.commentImg = commentImg
        this.$store.commit('feedback/set_feedbackDetail', res.data.data)
      })
    },
    // 删除反馈显示隐藏
    deleteFeedback (item) {
      this.id = item.commentId
      this.descTips = [{
        tips: '确定删除此条反馈吗？',
        default: ''
      }]
      this.isDelete = true
    }
  }
}
</script>

<style scoped lang="scss">
.feedbackList {
  min-height: calc(100% - 200px);
  background-color: #fff;
  border-radius: 5px;

  .empty {
    margin: 30px auto;
  }

  .title {
    height: 85px;
    line-height: 85px;
    font-size: 18px;
    color: #333333;
    font-weight: 700;
    padding-left: 30px;
    border-bottom: 1px solid #f2f2f2;
  }

  .list {
    padding: 20px 30px 80px;
    position: relative;
    table {
      width: 100%;
      thead {
        font-weight: 500;
        font-size: 14px;
        background: rgba(87, 131, 255, 0.05);
        th {
          color: rgba(51, 51, 51, 1);
          height: 60px;
          line-height: 60px;
          text-align: left;
          padding-left: 24px;
          border-bottom: solid 1px rgba(230, 230, 230, 1);
        }
      }
      tbody {
        tr {
          td {
            height: 64px;
            border-bottom: 1px solid #e6e6e6;
            padding-left: 30px;
            color: #666;
            font-size: 14px;
            span {
              text-decoration: underline;
              cursor: pointer;
            }

            .showDetail {
              color: #4868ff;
              margin-right: 24px;
            }

            .delete {
              color: #fb4646;
            }
          }
          .comment{
            max-width: 200px;
            word-break: break-all;
          }
        }
      }
    }

    .el-pagination {
      position: absolute;
      bottom: 30px;
      right: 30px;
    }
  }
}
</style>
